<!-- 启动评估 分配操作页 -->
<template>
  <t-row justify="center">
    <div class="start-allocation" style="width: 80%">
      <t-space direction="vertical">
        <span class="tip">
          为确保评估评估任务高效完成，可以为问卷各个部分指定填写人。此处设置不影响单一问题指派功能，且填写人和审核人可以为同一人。
        </span>
        <common-table :tableOptions="tableOptions" />
      </t-space>
    </div>
  </t-row>
</template>

<script lang="jsx">
import CommonTable from '@/components/CommonTable/index.vue';
import { mapGetters } from 'vuex';
import { UserIcon } from 'tdesign-icons-vue';

export default {
  components: { CommonTable },
  props: {
    qsInformation: {
      type: Object,
      default() {
        return {};
      },
    },
    userArr: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      tableOptions: {
        data: [],
        columns: [
          { colKey: 'name', title: '待分配' },
          {
            colKey: 'answerId',
            render: () => (
              <div>
                <UserIcon />
                <span>填写人</span>
              </div>
            ),
            cell: (h, { rowIndex }) => {
              if (rowIndex === 0)
                return (
                  <t-select
                    onChange={this.selectQuestionnaireAnswer}
                    popupProps={{ 'z-index': 9 }}
                    options={this.userArr}
                    v-model={this.qsInformation.answerId}
                  />
                );
              return (
                <t-select
                  onChange={this.selectPageAnswer}
                  popupProps={{ 'z-index': 9 }}
                  options={this.userArr}
                  v-model={this.qsInformation.qsDetailList[rowIndex - 1].content}
                />
              );
            },
          },
          {
            colKey: 'reviewId',
            render: () => (
              <div>
                <UserIcon />
                <span>审核人</span>
              </div>
            ),
            // cell: (h, { row }) => (
            cell: (h, { rowIndex }) => {
              if (rowIndex === 0)
                return (
                  <t-select
                    popupProps={{ 'z-index': 9 }}
                    options={this.userArr}
                    v-model={this.qsInformation.reviewId}
                  />
                );
              return (
                <span style="color: rgba(0,0,0,0.4)">
                  * 审核人不支持多人分配操作
                <br />* 可选设定每页填写人
                </span>
              );
            },
          },
        ],
        config: {
          rowKey: 'name',
          bordered: true,
          rowspanAndColspan: this.rowspanAndColspan,
        },
      },
    };
  },
  computed: {
    ...mapGetters('user', ['cId']),
  },
  mounted() {
    if (!this.qsInformation.id) {
      this.$set(this.qsInformation, 'answerId', this.cId);
      this.$set(this.qsInformation, 'reviewId', this.cId);
      this.qsInformation.qsDetailList.forEach((item, index) => {
        this.$set(this.qsInformation.qsDetailList[index], `content`, this.cId);
      });
    }

    this.tableOptions.data.push({ name: this.qsInformation.name });
    this.qsInformation.qsDetailList.forEach((item) => {
      this.tableOptions.data.push({ name: item.name });
    });
  },
  methods: {
    // 合并单元格方法
    rowspanAndColspan({ col, rowIndex }) {
      if (col.colKey === 'reviewId' && rowIndex === 1) {
        return {
          rowspan: this.qsInformation.qsDetailList?.length,
        };
      }
    },
    // 选择问卷作答人方法
    selectQuestionnaireAnswer() {
      this.qsInformation.qsDetailList.forEach((item, key) => {
        this.$set(this.qsInformation.qsDetailList[key], `content`, this.qsInformation.answerId);
      });
    },
    // 选择单页作答人方法
    selectPageAnswer() {
      const answerSet = new Set();
      this.qsInformation.qsDetailList.forEach((item) => {
        answerSet.add(item.content);
      });
      if (answerSet.size === 1) {
        this.$set(this.qsInformation, `answerId`, this.qsInformation.qsDetailList[0].content);
      } else {
        this.$set(this.qsInformation, `answerId`, '-');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.start-allocation {
  /deep/ .t-table__body {
    tr:nth-child(n + 2) {
      background-color: #f3f3f3;
    }
  }
  .tip {
    color: #181818;
  }
}
</style>
